大家好今天要做內部儲存空間的小UI，使用到Expanded、LinearGradient

實現UI的方式其實都在於怎麼組合這些Widget，今天的UI我想到兩種作法

方法一、使用LinearGradient

使用時可以為添加多個顏色，並與顏色相對應的stops，stops值可以是0.0到1.0
原使用於漸變顏色

 const LinearGradient({
    this.begin = Alignment.centerLeft,
    this.end = Alignment.centerRight,
    @required List<Color> colors,
    List<double> stops,
    this.tileMode = TileMode.clamp,
    GradientTransform transform,
  })

例如像這樣4個顏色與4個斷點
從第一個stop到第二個stop是0.7到0.7，顏色會從灰色變成藍色，
從第二個stop到第三個stop是0.7到0.8，顏色會從藍色變成藍色，
從第三個stop到第四個stop是0.8到0.8，顏色會從藍色變成白色，
所以看起來就變成沒有漸變的樣子，但可以按照某個比例分割Container的背景顏色

LinearGradient(
    colors: [
                Colors.grey,
                Colors.blue,
                Colors.blue,
                Colors.white
              ], 
     stops: [
                0.7,
                0.7,
                0.8,
                0.8,
              ])

方法二、使用Expanded

這個方法明顯比上面更簡單一點，還記得介紹過的Flexible嗎？
使用Expanded也可以給它設flex，因此它也會按照flex的比例去分配空間

SizedBox(
            height: 10.0,
            child: Row(
              children: [
                Expanded(
                    flex: 107000,
                    child: Container(
                      color: Colors.grey,
                    )),
                Expanded(
                    flex: 1000,
                    child: Container(
                      color: Colors.blue,
                    )),  Expanded(
                    flex: 11000,
                    child: Container(
                      color: Colors.white,
                    ))
              ],
            ),
          ),

再用Column、Row把文字排列一下，mainAxisAlignment有七種可以選
可以使用MainAxisAlignment.spaceBetween，讓child貼近最邊邊

  _buildStorage2() {
    return Card(
      color: Colors.white.withOpacity(0.2),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [Text("內部儲存空間"), Text("預設")],
          ),
          SizedBox(
            height: 10.0,
            child: Row(
              children: [
                Expanded(
                    flex: 107000,
                    child: Container(
                      color: Colors.grey,
                    )),
                Expanded(
                    flex: 1000,
                    child: Container(
                      color: Colors.blue,
                    )),  Expanded(
                    flex: 11000,
                    child: Container(
                      color: Colors.white,
                    ))
              ],
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Container(
                    width: 10,
                    height: 10,
                    color: Colors.grey,
                  ),
                  Text("已使用 107GB"),
                ],
              ),
              Row(
                children: [
                  Container(
                    width: 10,
                    height: 10,
                    color: Colors.blue,
                  ),
                  Text("Netflix 272MB"),
                ],
              ),
              Row(
                children: [
                  Container(
                    width: 10,
                    height: 10,
                    color: Colors.white,
                  ),
                  Text("可用 11GB"),
                ],
              ),
            ],
          )
        ],
      ),
    );
  }

今天完成之內部儲存空間UI

GitHub連結： flutter-netflix-clone